<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我的账户</title>
    
    <link rel="shortcut icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="/static/front/fonts/iconfont.css">
    <link rel="stylesheet" href="/static/front/css/base_new.css">
    <link rel="stylesheet" href="/static/front/css/library.css">
    <link rel="stylesheet" href="/static/front/css/style.css">
    <script src="/static/front/js/jquery-1.11.1.min.js"></script>
    <script src="/static/front/js/jquery.countdown.js"></script>
    <script src="/static/front/js/js.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/front/js/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="plugIn/PIE.js"></script>
    <![endif]-->
    
	<style type="text/css">
       .investment .quick_screen{display:inline;}
       .investment .quick_screen:after{display:block;content:'';overflow:hidden;width:0;height:0;celar:both;}
       .investment .quick_screen span{margin-top:8px;margin-left:25px;}
       .investment .screen ul li{float:left;margin:8px 8px;}
       .investment .screen ul li a{display:inline;padding:3px 10px;}
       .investment .screen ul li a.current{background:#5dc0d2;color:#fff;}
       .investment .screen ul li a:hover{background:#5dc0d2;color:#fff;}
       
       .Tab .Tab-shuaixuan{float:right;margin-top:-40px;cursor:pointer;
      	width: 78px;
   		height: 25px;
    	border: #4db0c2 1px solid;
    	background: #5dc0d2;
    	color: #fff;
    	border-radius: 3px;
   		-webkit-border-radius: 3px;
   		-moz-border-radius: 3px;
    	-ms-border-radius: 3px;
   		text-align: center;
   		behavior: url(plugIn/PIE.htc);
    	line-height:25px;
   		}
   		
   		.investment .quick_sxtj{margin-left:20px;}
   		.investment .quick_sxtj ul.clearfix li{font-size:12px;}
   		.investment .quick_sxtj ul.clearfix li input{border:1px solid #ccc;height:25px;}
   		.investment .quick_sxtj ul.clearfix li .quick_btn{
   		width:50px;
   		height:27px;
    	border: #4db0c2 1px solid;
    	background: #5dc0d2;
    	color: #fff;
    	border-radius: 3px;
   		-webkit-border-radius: 3px;
   		-moz-border-radius: 3px;
    	-ms-border-radius: 3px;
   		text-align: center;
   		behavior: url(plugIn/PIE.htc);
    	line-height:26px;
    	cursor:pointer;margin-left:20px;
   		}
      </style>
</head>

<body>	
    <!-- 头部 开始 -->
    <div id="header">
    	<#include "../base/top.ftl" />
    </div>	
    <div class="content">
		<div id="myInvestmentMain" class="cnt clearfix layoutMain">
		   <#include "base1.ftl" />
		   <div class="investment fr" style="width:81.5%">
            <h2>我的借款</h2>
            <div class="Tab" style="margin-top: 48px;">
                <span class="TabOne tableTab active">我的借款</span>
                <span class='Tab-shuaixuan'>快速筛选</span>
                <div class="screen" style="border-top:1px dashed #ccc;width:100%;height:0px;overflow:hidden;">
                	<div class="quick_screen" style="width:100%;height:45px">
                		<span class='fl'>筛选时间段：</span>
                		<ul class='fl'>
						    <li id="-1"><a  class="current" href="javascript:void(0)">全部</a></li>
						    <li id="1"><a href="javascript:void(0)">今天</a></li>
						    <li id="2"><a href="javascript:void(0)">最近1周</a></li>
						    <li id="3"><a href="javascript:void(0)">最近1个月</a></li>
						    <li id="4"><a href="javascript:void(0)">最近3个月</a></li>
						    <li id="5"><a href="javascript:void(0)">最近6个月</a></li>
						</ul>
                	</div>
                	<div class='quick_sxtj'>
                		<ul class="clearfix">
                            <li>
                                <input type="text" id="publishTimeBegin1" style="line-height:25px;display:inline-block;text-align:center;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:'readOnly'})" placeholder="请选择开始时间" value="<#if publishTimeBegin?exists>${publishTimeBegin}</#if>">&nbsp;&nbsp; 到&nbsp;&nbsp;
                                <input type="text" id="publishTimeEnd1" style="line-height:25px;display:inline-block;text-align:center;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:'readOnly'})" placeholder="请选择结束时间" value="<#if publishTimeEnd?exists>${publishTimeEnd}</#if>">
                            </li>
                            <li>类型：
                                <select name="borrowStatus" id="borrowStatus" style="height:27px;border: 1px solid #ccc;">
                                    <option value="">---选择状态---</option>
                                    <option value="borrow" <#if status?exists && (status== "borrow" || status == "new")>selected="true"</#if>>投资中</option>
                                    <option value="check" <#if status?exists && status == "check">selected="true"</#if>>满标复审中</option>
                                    <option value="pay" <#if status?exists && status == "pay">selected="true"</#if>>还款中</option>
                                    <option value="complete" <#if status?exists && status == "complete">selected="true"</#if>>已完成</option>
                                    <option value="expire" <#if status?exists && status == "expire">selected="true"</#if>>过期/流标</option>
                                </select>
                            </li>
                            <li>
                                <input type="button" class='quick_btn' value="搜 索" id="search">
                            </li>
                        </ul>
                	</div>
                </div>
              <script>
             	var h = $('.screen').height();
             	if(h==0){
             		$('.screen').css('border','none')
             	};
              	$('.Tab-shuaixuan').click(function(){
              		var h = $('.screen').height();
              		if(h==0){
              			$('.screen').css({
              				'borderTop':'1px dashed #ccc',
              			}).animate({
              				height:90
              			});
              		}else{
              			$('.screen').animate({
              				height:0
              			},function(){
              				$('.screen').css('borderTop','none');
              			});
              		};
              	});
              	<#if (publishTimeBegin?exists && publishTimeBegin != '') || (publishTimeEnd?exists && publishTimeEnd != '') || (status?exists && status != '') || (timePeriod?exists && timePeriod != '-1')>
              		$(".Tab-shuaixuan").click();
              	</#if>
              </script>
                <#if (pageInfo?? && pageInfo.pageList?size>0)>
		            <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" style='margin-top: 0px;display:block;'>
		                <tbody>
			                <tr>
			                    <th class="one" style="text-align:center;width:280px;">借款标题 ｜ 投标时间</th>
			                    <th class="two" style="text-align:center;">进度 ｜ 期数</th>
			                    <th class="three" style="text-align:center;width:185px;">年利率 ｜ 金额</th>
			                    <th class="four" style="text-align:center;">借款者</th>
			                    <th class="five" style="text-align:center;">状态</th>
			                </tr>
		                 	<#list pageInfo.pageList as item>
		                 		<tr>
		                        <td class="one clearfix"  style="cursor:pointer" tender_id=<#if item.borrowId?exists>${item.borrowId}</#if>>
			                            <p class=" icon">
   	                                        <#if item.productId?exists && item.productId==3>
			                            		E
			                            	<#elseif item.productId?exists && item.productId==4>
			                            		车
			                            	<#elseif item.productId?exists && item.productId==5>
			                            	        房 
			                            	<#elseif item.productId?exists && item.productId==6>
			                            		商
			                            	<#elseif item.productId?exists && item.productId==7>
			                            		押
			                            	<#elseif item.productId?exists && item.productId==8>
			                            		担
			                            	<#elseif item.productId?exists && item.productId==10>
			                            		贷
			                            	</#if>
			                            </p>
				                        <div class="fr text" style="width:210px;">
				                        <#if item.title?exists && item.title?length lt 20>
				                        	${item.title}
				                        <#else>
				                        	${item.title?substring(0,20)}...
				                        </#if>
				                        <br>
				                            <span>${(item.createTime?string("yyyy-MM-dd"))!}</span>　　<i>${(item.createTime?string("HH:mm:ss"))!}</i>
				                        </div>
				                    </td>
				                    <td class="two">
				                        <i class="fl">${item.schedules!}%</i><u class="fr">${item.period!}期</u>
				                    </td>
				                    <td class="three"><i class="fl">${item.percent!}%</i><u class="fr">${(item.amount?string("#.00"))!}</u></td>
				                    <td class="four"><i>${item.borrowUserName!}</i></td>
				                    <td class="five"> <i>
				                    	<#if (item.status?exists) & ((item.status== "borrow") || (item.status == "new"))>投资中
		                        		<#elseif (item.status?exists) & (item.status== "check")>满标复审中
		                        		<#elseif (item.status?exists) & (item.status== "pay")>还款中
		                        		<#elseif (item.status?exists) & (item.status== "complete")>已完成
		                        		<#elseif (item.status?exists) & (item.status== "expire")>过期/流标
		                        		</#if>
				                    </i></td>
				                </tr>
		                	</#list>
		                </tbody>
		            </table>
                    <div class="tcdPageCode"></div>
                <#else>
                	<table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" style='margin-top: 0px;display:block;'>
		                <tbody>
			                <tr>
			                    <th class="one" style="text-align:center;width:380px;">借款标题 ｜ 投标时间</th>
			                    <th class="two" style="text-align:center;">借款者 ｜ 期数</th>
			                    <th class="three" style="text-align:center;">年利率 ｜ 金额</th>
			                    <th class="four" style="text-align:center;">进度</th>
			                    <th class="five" style="text-align:center;">状态</th>
			                </tr>
							<tr align="center">
								<td colspan="10">暂无数据</td>
							</tr>
						</tbody>
		            </table>
                </#if>
		</div>
        </div>
        
		</div>
    </div>
    <div id="footer">
      <div class="content">      
		<#include "../base/foot.ftl" />
      </div>
    </div>       
</div>  
</body>
<script type="text/javascript" src="${_front_js}/jquery.page.js"></script>
<script type="text/javascript" src="${_front_js}/tabs.js"></script>
<script type="text/javascript" src="${_front_js}/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${_front_js}/date.js"></script>
<script type="text/javascript" src="${_front_js}/pagination/jquery.pagination.js"></script>
<script>
$(".tcdPageCode").createPage({
    pageCount:${pageInfo.pages},//总页数
    current:${pageInfo.index},
    backFn:function(index){
        window.location.href="/account/credit?index="+index;
    }
});

<#if timePeriod?exists>
	$(".current").removeClass("current");
	$('#'+'${timePeriod}'+' a').addClass("current");
</#if>

$(".quick_screen ul li").click(function(){
	var publishTimeBegin = $("#publishTimeBegin1").val();
	var publishTimeEnd = $("#publishTimeEnd1").val();
	var status = $("#borrowStatus").val();
	$(".current").removeClass("current");
	$(this).addClass("current");
	var id = $(this).attr("id");
	window.location="/account/credit?timePeriod="+id+"&publishTimeBegin="+publishTimeBegin+"&publishTimeEnd="+publishTimeEnd+"&status="+status;
});

$("#search").click(function(){
	var publishTimeBegin = $("#publishTimeBegin1").val();
	var publishTimeEnd = $("#publishTimeEnd1").val();
	var status = $("#borrowStatus").val();
	var timePeriod = "-1";
	<#if timePeriod?exists>
		timePeriod = ${timePeriod};
	</#if>
	window.location="/account/credit?publishTimeBegin="+publishTimeBegin+"&publishTimeEnd="+publishTimeEnd+"&status="+status+"&timePeriod="+timePeriod;
})
$(".tabLibrary td").click(function(){
     var id=$(this).attr("tender_id");
     if(typeof(id)!="undefined"){
	  window.location="/invest/detail?id="+id;
    }
})
</script>
</html>